<template>
  <div>
    <pages-header
      ref="pageHeader"
      :backUrl="$routeProStr + '/order/orderlist'"
      :title="$route.params.id ? '编辑订单' : '录入订单'"
    ></pages-header>
    <el-card :bordered="false" class="mt16" shadow="never">
      <el-form :model="formData" label-width="160px">
        <el-form-item label="代理商编码：">
          <el-input
            v-model="formData.leader_id"
            :maxlength="18"
            class="content_width"
            placeholder="请输入代理商编码"
          ></el-input>
        </el-form-item>

        <template>

          <div style="margin-bottom: 20px">
            <span style="font-size: 18px; color: #000; margin-right: 20px">客户/订单信息</span>
            <el-button
              icon="el-icon-circle-plus"
              style="width: 80px; font-size: 14px"
              type="primary"
              @click="addNew(1)"
            ></el-button>
          </div>
          <div v-for="(item, index) in userCodes" :key="index">
            <el-form-item label="客户会员码：">
              <el-input
                v-model="item.id"
                :controls="false"
                class="content_width"
                @input="getUserInfo(index)"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <div style="display: flex; justify-content: start; align-items: center">
                <p style="min-width: 400px">客户姓名：{{ item.name }}</p>
                <p style="margin-left: 20px">客户电话：{{ item.phone }}</p>
              </div>
              <div>客户地址：{{ item.address }}</div>
            </el-form-item>

            <div :key="index">
              <el-form-item label="产品编码：">
                <el-input
                  v-model="productCodes[index].id"
                  :controls="false"
                  class="content_width"
                  @input="getProductInfo(index)"
                ></el-input>
              </el-form-item>
              <el-form-item label="数量：">
                <el-input-number
                  v-model="productCodes[index].num"
                  :controls="false"
                  :max="9999999999"
                  :min="1"
                  class="content_width"
                  @input="getPrice(index)"
                ></el-input-number>
                * {{ productCodes[index].oneprice }}
              </el-form-item>
              <el-form-item label="">
                <div style="display: flex; justify-content: start; align-items: center">
                  <p style="min-width: 400px">总金额：{{ productCodes[index].allprice }}</p>
                  <p style="margin-left: 20px">应转入公司金额：{{ productCodes[index].yjprice }}</p>
                </div>
              </el-form-item>
            </div>
            <el-divider></el-divider>
          </div>
        </template>
        <el-form-item style="text-align: right">
          <el-button v-db-click :disabled="disabled" type="primary" @click="save">录入</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import goodsList from '_c/goodsList/index.vue';
import { addOrderApi, productApi, userApi } from "@api/order";

export default {
  name: 'storeCouponCreate',
  components: {
    goodsList,
  },
  data() {
    return {
      disabled: false,
      formData: {
        leader_id: '',
      },
      userCodes: [
        {
          id: '',
          name: '-',
          phone: '-',
          address: '-',
          orders:[]
        },
      ],
      productCodes: [
        {
          id: '',
          num: 1,
          oneprice: '-',
          allprice: '-',
          yjprice: '-',
        },
      ],
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
  },
  created() {},
  methods: {
    getUserInfo(index) {
      console.log(this.userCodes);
      console.log(index);
      let id = this.userCodes[index].id;
      if (!id) return;
      let that = this,
        isNum = 0;

      if (this.userCodes.length > 1) {
        for (let i = 0; i < this.userCodes.length; i++) {
          if (id === this.userCodes[i].id) {
            isNum++;
          }
        }
        if (isNum > 1) {
          that.$message.error('此会员码已存在');
          return;
        }
      }

      userApi(id)
        .then(async (res) => {
          console.log(res);
          this.userCodes[index].name = res.data.ps_info.nickname;
          this.userCodes[index].phone = res.data.ps_info.phone;
          this.userCodes[index].address = res.data.ps_info.city_name + res.data.ps_info.address;
        })
        .catch((res) => {
          this.userCodes[index].name = '-';
          this.userCodes[index].phone = '-';
          this.userCodes[index].address = '-';
          that.$message.error(res.msg);
        });
    },
    getProductInfo(index) {
      console.log(this.productCodes);
      console.log(index);
      let id = this.productCodes[index].id;
      if (!id) return;
      let that = this;
      productApi(id)
        .then(async (res) => {
          console.log(res);
          let apric= res.data.productInfo.price * 1;
          let yjpric= res.data.productInfo.price * 1 * 0.85;
          this.productCodes[index].oneprice = res.data.productInfo.price;
          if(apric&&yjpric){
            this.productCodes[index].allprice = apric.toFixed(2);
            this.productCodes[index].yjprice = yjpric.toFixed(2);
          }

        })
        .catch((res) => {
          this.productCodes[index].oneprice = '-';
          this.productCodes[index].allprice = '-';
          this.productCodes[index].yjprice = '-';
          that.$message.error(res.msg);
        });
    },
    //计算价格
    getPrice(index) {
      console.log(index);
      let num = this.productCodes[index].num ;
      let apric= this.productCodes[index].oneprice * num;
      let yjpric= this.productCodes[index].oneprice * num * 0.85;
      if(apric&&yjpric){
        this.productCodes[index].allprice =  apric.toFixed(2);
        this.productCodes[index].yjprice =  yjpric.toFixed(2);
      }

    },
    addNew(type) {
      let newCodes = this.userCodes;
      let newpCodes = this.productCodes;
      let isYes = false;
      for (let i = 0; i < newCodes.length; i++) {
        console.log(newCodes[i].name);
        if (newCodes[i].name === '-') {
          isYes = true;
          break;
        }
        if (newpCodes[i].id === '') {
          isYes = true;
          break;
        }
      }
      if (isYes) {
        this.$message.error('请完善内容');
      } else {
        newCodes.push({
          id: '',
          name: '-',
          phone: '-',
          address: '-',
        });
        this.userCodes = newCodes;

        newpCodes.push({
          id: '',
          num: 1,
          oneprice: '-',
          allprice: '-',
          yjprice: '-',
        });
        this.productCodes = newpCodes;
      }
    },
    save() {
      let user_orders = [],that=this;
      for (let i = 0; i < this.userCodes.length; i++) {
        let uid = this.userCodes[i].id;
        let pid = this.productCodes[i].id;
        let num = this.productCodes[i].num;
        user_orders.push({uid,pid,num})
      }


      let data ={
        leader_id:this.formData.leader_id,
        order_info:JSON.stringify(user_orders),
      }
      console.log(data);
      if(!data.leader_id){
        that.$message.error("请填写代理商编码");
        return
      }
      if(!data.order_info){
        that.$message.error("请完善客户/订单信息");
        return
      }

      addOrderApi(data)
        .then(async (res) => {
          console.log(res);
          that.$message.success("录入成功");
          that.$router.push({
            path:this.$routeProStr + '/order/orderlist',
          });
        })
        .catch((res) => {

          that.$message.error(res.msg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.content_width {
  width: 414px;
}

.info {
  color: #888;
  font-size: 12px;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.ivu-icon-ios-close-circle {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.tip {
  color: #888;
  font-size: 12px;
  line-height: 16px;
}
</style>
